<template>
  <div class="left">
    <p class="f18 fw600">逾期T+{{ day }}统计</p>
    <div class="t_c mgt20">
      <p>
        <span
          id="overdue7_order_total"
          class="f28 DIN mgb5"
        >{{totalovernum}}</span>
        <span
          id="overdue7_rate_total"
          class="f16 red"
        >({{totaloverrate*100}}%)</span>
      </p>
      <span class="f14 c868686">总逾期订单量
        <el-tooltip placement="topLeft">
          <template #title>
            <p style="color: #fff">
              总逾期订单量：当前逾期天数大于{{ day }}天的订单量
            </p>
            <p style="color: #fff">总逾期率：总逾期订单量 / 总成交订单量</p>
          </template>
          <!-- <span style="color: #868686; padding-left: 4px; font-size: 14px"><QuestionCircleOutlined /></span> -->
        </el-tooltip>
      </span>
    </div>
    <div class="ul">
      <div class="li flex bgEDF2F9 c868686">
        <p class="w160">风控评级</p>
        <p class="w160">逾期订单</p>
        <p class="w160">总成交订单</p>
        <p class="w85">逾期订单占比</p>
      </div>
      <div class="li flex"v-for="(item, index) in Data"
        :key="index">
        <p class="f14 c868686 w160">{{item.RiskCode}}类逾期订单量</p>
        <p class="f20 DIN c2D2D2D w160">{{item.OverdueNum}}</p>
        <p class="f14 c868686 w160">{{item.DealNum}}</p>
        <p class="w85 t_r">
          <span class="f14 red">{{item.OverdueRate}}</span>
          <el-tooltip placement="topLeft">
            <template #title>
              <div v-html="tips('A')" />
            </template>
            <!-- <span style="color: #868686; padding-left: 4px; font-size: 14px"><QuestionCircleOutlined /></span> -->
          </el-tooltip>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'

import { Search } from '@element-plus/icons-vue'
const props = defineProps({
  option: {
    type: Object,
    default: () => ({}),
  },
  day: Number,
  Data: Array,
})
const totalnum = ref(0);
const totalovernum = ref(0);
const totaloverrate = ref(0);
onMounted(() => {
  if(props.Data){
    props.Data.forEach(element => {
  totalovernum.value+=element.OverdueNum
  totalnum.value+=element.DealNum
});
totaloverrate.value = totalnum.value?(totalovernum.value/totalnum.value).toFixed(2):0;
  }



})
const tips = (level) => {
  return `<p style="color: #fff">${level}类逾期订单量：风控评级是${level}类且当前逾期天数大于7天的订单量</p><p style="color: #fff">${level}类逾期率：${level}类逾期订单量 / 风控评级是${level}类的总成交订单量</p>`
}


</script>

<style lang="scss" scoped>
.c2D2D2D {
  color: #2d2d2d;
}
.c868686 {
  color: #868686;
}
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px !important;
}
.f18 {
  font-size: 18px;
}
.f28 {
  font-size: 28px;
}
.fw600 {
  font-weight: 600;
}
.t_c {
  text-align: center;
}
.mgb5 {
  margin-bottom: 5px;
}
.mgt20 {
  margin-top: 20px !important;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.red {
  color: #ff002e;
}
.ul {
  margin-top: 20px;
  .li {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f0f0f0;
    padding: 0 20px;
    box-sizing: border-box;
    p {
      width: 20%;
      line-height: 1.3;
      white-space: nowrap;
    }
    p:nth-child(1) {
      width: 30%;
      min-width: 90px;
    }
    p:nth-child(2),
    p:nth-child(3) {
      text-align: center;
    }
    p:nth-child(4) {
      text-align: right;
    }
  }
  .li.bgEDF2F9 {
    background: #edf2f9;
  }
  .li:nth-child(odd) {
    background: #fafafa;
  }
}
</style>